<template>
	<view class="heart" :style="setStyle">
		<navigator :url="url">
			<view class="text">{{text}}</view>
		</navigator>
	</view>
</template>

<script>
	/**
	 * 首页心形图标
	 */
	export default {
		name: "wolf-heart",
		props: {
			bgColor: {
				type: String,
				default: "#ff5d60"
			},
			text: {
				type: String,
				default: ""
			},
			url: {
				type: String,
				default: ''
			}
		},
		computed: {
			setStyle() {
				return {
					"--bg-color": this.bgColor
				}
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style scoped lang="scss">
	.heart {
		--w: 40px;
		--bg-color: #6d0fe7;
		--color: #ffffff;
		position: relative;
		width: var(--w);
		height: var(--w);
		background-color: var(--bg-color);
		animation: move .5s infinite alternate;
		display: flex;
		align-items: center;
		justify-content: center;

		&::before,
		&::after {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			content: '';
			background-color: var(--bg-color);
			border-radius: 100%;
		}

		&::before {
			transform: translateX(-50%);
		}

		&::after {
			transform: translateY(-50%);
		}
	}

	.text {
		position: relative;
		z-index: 1;
		transform: rotate(-45deg);
		color: var(--color);
		font-size: 14px;
		text-align: center;
		top: -5px;
		left: -5px;
		font-weight: 600;
	}


	@keyframes move {
		0% {
			transform: scale(0.9) rotate(45deg);
		}

		100% {
			transform: rotate(45deg);
			;
		}
	}
</style>